<template>
	<div class="extend-action-timeline" :id="id">
		<div class="extend-action-timeline-table">
			<div class="extend-action-timeline-thead"></div>
			<div class="extend-action-timeline-body" v-if="data.length > 0">
				<div
					class="timeline-draw extend-action-timeline-body__timeline timeline-head"
				>
					<div class="timeline-wrapper">
						<div class="timeline-wrapper__timeline-index">
							{{ $t('common.timeline.index') }}
						</div>
						<div class="timeline-wrapper__usertaskname">
							{{ $t('common.timeline.node') }}
						</div>
						<div class="timeline-wrapper__authorname">
							{{ $t('common.timeline.author') }}
						</div>
						<div class="timeline-wrapper__type">
							{{ $t('common.timeline.type') }}
						</div>
						<div class="timeline-wrapper__last-time">
							{{ $t('common.timeline.lasttime') }}
						</div>
						<div class="timeline-wrapper__fullmessage">
							{{ $t('common.timeline.opinion') }}
						</div>
					</div>
					<div class="timeline-arrow"></div>
				</div>
				<template v-for="(usertask, index) in data" :key="index">
					<div class="timeline-content">
						<div class="extend-action-timeline-body__timeline">
							<div class="timeline-wrapper">
								<div class="timeline-wrapper__timeline-index">
									<span>{{ usertask.index }}</span>
									<div class="icon-bottom" v-if="usertask.index != 1">
										<i class="fa fa-long-arrow-down"></i>
									</div>
								</div>
								<div class="timeline-wrapper__usertaskname">
									{{ usertask.usertaskname }}
								</div>
								<div class="timeline-wrapper__authorname">
									{{
										usertask.displayNames
											? usertask.displayNames.join(',')
											: usertask.authorName
									}}
								</div>
								<div class="timeline-wrapper__type">
									<div class="dot" v-show="usertask.type"></div>
									<span>{{ usertask.type }}</span>
								</div>
								<div class="timeline-wrapper__last-time">
									{{ formatDate(usertask.time, 'MM月DD日 HH:mm:ss') }}
								</div>
								<a-popover
									class="timeline-wrapper__tooltip"
									placement="top"
									:overlayStyle="{ width: '500px' }"
								>
									<span>
										{{ usertask.fullMessage }}
									</span>
									<template #content>
										{{ usertask.fullMessage }}
									</template>
								</a-popover>
							</div>
							<div
								v-if="usertask.displayNames && usertask.displayNames.length > 1"
								class="timeline-arrow"
								@click="changeExpand(usertask)"
							>
								<MinusOutlined v-if="usertask.isShow" />
								<PlusOutlined v-else />
							</div>
						</div>
						<div v-if="usertask.isShow">
							<template
								v-for="(displayName, index) in usertask.displayNames"
								:key="index"
							>
								<div
									class="timeline-draw extend-action-timeline-body__timeline"
								>
									<div class="timeline-wrapper">
										<div class="timeline-wrapper__timeline-index">
											<div
												v-if="usertask.index < usertasksLength"
												class="icon-line"
											></div>
										</div>
										<div class="timeline-wrapper__usertaskname"></div>
										<div class="timeline-wrapper__authorname">
											{{ displayName }}
										</div>
									</div>
									<div class="timeline-arrow"></div>
								</div>
							</template>
						</div>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { extendActionTimelineProps } from './extend-action-timeline';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { IHttpResponse, IParam, createUUID } from '@/core';
import { Ref, ref } from 'vue';
import { format as formatFns } from 'date-fns';
import { parseISO } from 'date-fns';

const props = defineProps(extendActionTimelineProps);

const id: string = createUUID();

const data: Ref<IParam[]> = ref([]);

let usertasksIndex = 1;

const usertasksLength: Ref<number> = ref(1);

const initUIStateData = () => {
	if (data.value.length > 0) {
		usertasksIndex = 1;
		data.value.forEach((item: any) => {
			item.isShow = false;
			item.index = usertasksIndex;
			usertasksIndex++;
		});
		usertasksLength.value = usertasksIndex - 1;
	}
};

const formatData = (items: any) => {
	const historyTasks = items.historytasks || [];
	const waitTasks = items.waittasks || [];
	if (historyTasks.length > 0) {
		data.value.push(...historyTasks);
	}
	if (waitTasks.length > 0) {
		const taskItems: any[] = [];
		waitTasks.forEach((task: any) => {
			const index = taskItems.findIndex((item: any) =>
				Object.is(task.usertaskid, item.usertaskid)
			);
			if (task.usertaskid && index == -1) {
				task.displayNames = [task.displayname];
				taskItems.push(task);
			}
			if (index != -1) {
				const index = taskItems.findIndex((item: any) =>
					Object.is(item.usertaskid, task.usertaskid)
				);
				taskItems[index].displayNames.push(task.displayname);
			}
		});
		data.value.push(...taskItems);
	}
};

const formatDate = (date: string, format: string): string => {
	if(!date){
		return '';
	} 
	const tempFormat = format.replaceAll('Y', 'y').replaceAll('D', 'd');
	return formatFns(parseISO(date), tempFormat);
};

const changeExpand = (usertask: IParam) => {
	usertask.isShow = !usertask.isShow;
};

const acceptingOfficerNodup = (tag: string, items: IParam[]): IParam[] => {
	let tempItems: IParam[] = [];
	if (items.length > 0 && tag) {
		items.forEach((item: IParam) => {
			tempItems.push(item[tag]);
		});
	}
	tempItems = [...new Set(tempItems)];
	return tempItems;
};

const load = async () => {
	try {
		const entityService = await App.getDataService(
			props.appEntityCodeName,
			props.context
		);
		props.pLoadingHelper.beginLoading(id);
		const response: IHttpResponse = await entityService.GetWFHistory(
			props.context
		);
		if (response && response.success) {
			formatData(response.data);
			initUIStateData();
		}
		props.pLoadingHelper.endLoading();
	} catch (error) {
		props.pLoadingHelper.endLoading();
	}
};

load();
</script>
